<!DOCTYPE html> <!-- -*- html -*- -->
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="initial-scale=1, maximum-scale=1">
  <title>"Solving" a matrix</title>
  <link rel="shortcut icon" href="img/gatech.gif"/>

  
    <link rel="stylesheet" href="css/slideshow.css?vers=c31d27">


  <style>
      
  body {
      text-align: center;
      margin: 0;
      background: white;
  }

  #mathbox {
      width: 800px;
      height: 300px;
      margin: 0;
      border: 0;
      position: relative;
      display: inline-block;
  }

  .centered {
      width: 800px;
      display: inline-block;
  }

  .my-turn {
      width: 30%;
      text-align: center;
  }

  </style>

</head>
<body>
    
    <div id="mathbox"></div>
    <div class="centered">
        <div class="slideshow rrmat">
            <div class="controls">
                <span class="control-button">
                    <span class="icon-arrow prev-button inactive">
                        <span></span><span></span>
                    </span>
                </span>
                <span class="control-button">
                    <span class="icon-repeat reload-button inactive">
                        <span></span><span></span><span></span><span></span>
                    </span>
                </span>
                <span class="control-button" id="next-button">
                    <span class="icon-arrow next-button">
                        <span></span><span></span></span>
                </span><br>
                <span class="pages"></span>
            </div>
            <div class="caption">We want to "solve" this matrix.</div>
        </div>
        <div class="my-turn">
            <button class="slideshow-button">
                Let me take it from here.
            </button>
        </div>
    </div>


    
    <script src="js/slideshow.js?vers=774162"></script>


    <script type="text/javascript">
        "use strict";
        DomReady.ready(function() {

        var augment, blink, camera, height, mathbox, ortho, three, view, width;

ortho = 10000;

width = 800;

height = 300;

mathbox = window.mathbox = mathBox({
  element: document.getElementById("mathbox"),
  size: {
    width: width,
    height: height
  },
  plugins: ['core'],
  mathbox: {
    warmup: 2,
    splash: true,
    inspect: false
  },
  splash: {
    fancy: true,
    color: "blue"
  },
  camera: {
    near: ortho / 4,
    far: ortho * 4,
    lookAt: -width / 4
  }
});

if (mathbox.fallback) {
  throw "WebGL not supported";
}

three = mathbox.three;

three.renderer.setClearColor(new THREE.Color(0xFFFFFF), 1.0);

camera = mathbox.camera({
  proxy: false,
  position: [0, 0, ortho],
  fov: Math.atan(height / ortho) * 360 / π,
  lookAt: [width / 4, 0, 0]
});

view = mathbox.cartesian({
  range: [[-width / 2, width / 2], [-height / 2, height / 2], [-50, 50]],
  scale: [width, height, 100]
});

mathbox.set('focus', ortho);

window.rrmat = new RRMatrix(3, 4, view, mathbox, {
  augmentCol: 2,
  startAugmented: true
});

window.blink = blink = function(color, entries, times) {
  var arr, delay, i, k, last, ref;
  if (!times) {
    times = 2;
  }
  arr = [];
  delay = 0;
  for (i = k = 0, ref = times; 0 <= ref ? k < ref : k > ref; i = 0 <= ref ? ++k : --k) {
    arr.push({
      color: color,
      transform: "scale(2,2)",
      entries: entries,
      duration: 0.4,
      delay: delay
    });
    delay += 0.4;
    last = {
      color: "black",
      transform: "",
      entries: entries,
      duration: 0.4,
      delay: delay
    };
    delay += 0.4;
    arr.push(last);
  }
  delete last.color;
  return arr;
};

augment = null;

rrmat.setMatrix([[1, 2, 3, 6], [2, -3, 2, 14], [3, 1, -1, -2]]);

augment = 2;

window.slideshow = rrmat.slideshow().caption("We want these two entries to be zero.").setStyle(blink("red", [[1, 0], [2, 0]]))["break"]().caption("So we subtract multiples of the first row.").rowRep(0, -2, 1).rowRep(0, -3, 2).setStyle({
  color: "black",
  entries: [[1, 0], [2, 0]],
  duration: 0.2
})["break"]().caption("Now we want these to be zero.").setStyle(blink("red", [[0, 1], [2, 1]]))["break"]().caption("It would be nice if this were a 1.").setStyle(blink("blue", [[1, 1]]))["break"]().caption("We could divide the second row by by -7").setStyle(blink("blue", [[1, 0], [1, 1], [1, 2], [1, 3]])).caption("We could divide the second row by by -7" + " ... but then we would end up with ugly fractions.").setStyle({
  color: "black",
  entries: [[1, 0], [1, 1], [1, 2], [1, 3]],
  duration: 0.2
})["break"]().caption("Let's swap the last two rows first.").rowSwap(1, 2).setStyle([
  {
    color: "black",
    entries: [[1, 1]],
    duration: 1,
    delay: 0.1,
    color: "red",
    entries: [[2, 1]],
    duration: 1,
    delay: 0.1
  }
])["break"]().caption("Now we divide the middle row by -5, without producing fractions.").rowMult(1, -1 / 5)["break"]().caption("We kill the red entries using row replacement, like before.").rowRep(1, -2, 0).rowRep(1, 7, 2).setStyle({
  color: "black",
  entries: [[0, 1], [2, 1]],
  duration: 0.2
})["break"]().caption("Next we want to get rid of these entries.").setStyle(blink("red", [[0, 2], [1, 2]]))["break"]().caption("To make this entry a 1...").setStyle(blink("black", [[2, 2]])).caption("To make this entry a 1, we divide the third row by 10").rowMult(2, 1 / 10)["break"]().caption("We kill the red entries using row replacement, like before.").rowRep(2, -2, 1).rowRep(2, 1, 0).setStyle({
  color: "black",
  entries: [[0, 2], [1, 2]],
  duration: 0.2
}).caption("And we're done!").setStyle({
  transform: "rotate(360deg)",
  entries: [[0, 0], [0, 1], [0, 2], [0, 3], [1, 0], [1, 1], [1, 2], [1, 3], [2, 0], [2, 1], [2, 2], [2, 3]],
  duration: 1.5,
  timing: 'linear'
})["break"]();

document.querySelector(".my-turn button").onclick = function() {
  var den, entry, getOps, i, j, k, l, m, mat, matval, num, ops, opsval, ref, ref1, ref2, ref3, ref4, row, rows, str;
  mat = slideshow.states[0].matrix;
  rows = [];
  for (i = k = 0, ref = mat.length; 0 <= ref ? k < ref : k > ref; i = 0 <= ref ? ++k : --k) {
    row = [];
    for (j = l = 0, ref1 = mat[0].length; 0 <= ref1 ? l < ref1 : l > ref1; j = 0 <= ref1 ? ++l : --l) {
      entry = mat[i][j];
      ref2 = RRMatrix.approxFraction(entry), num = ref2[0], den = ref2[1];
      row.push(num + ((ref3 = den !== 1) != null ? ref3 : "%2F" + {
        den: ""
      }));
    }
    rows.push(row.join(","));
  }
  matval = rows.join(":");
  getOps = function(slide) {
    var m, ref4, ret;
    if (slide.slides) {
      ret = [];
      for (i = m = 0, ref4 = slide.slides.length; 0 <= ref4 ? m < ref4 : m > ref4; i = 0 <= ref4 ? ++m : --m) {
        ret = ret.concat(getOps(slide.slides[i]));
      }
      return ret;
    }
    if (slide.data.shortOp) {
      return [slide.data.shortOp];
    }
    return [];
  };
  ops = [];
  for (i = m = 0, ref4 = slideshow.currentSlideNum; 0 <= ref4 ? m < ref4 : m > ref4; i = 0 <= ref4 ? ++m : --m) {
    ops = ops.concat(getOps(slideshow.slides[i]));
  }
  opsval = ops.join(",");
  str = "rrinter.html?mat=" + matval + "&ops=" + opsval + "&cur=" + ops.length;
  if (augment != null) {
    str += "&augment=" + augment;
  }
  return window.open(str);
};


        });
    </script>
</body>
</html>

